<template>
	<view class="content">
		<!-- 订单信息 -->
		<uni-section class="mb-10 width690" title="订单信息" type="line">
			<view class="goods-info">
			<!-- <h1>订单信息</h1>
			<view class="line"></view> -->
			<!-- 套餐信息 -->
			
				<view class="meal" v-if="orderType != 'yuepai'">
					<!-- <span>套餐名称: {{ mealData.setMealName}} </span>
					<span>套餐时长: {{ mealData.duration }}</span>
					<span>套餐金额: ¥{{ mealData.price }}</span>
					<span>素材最大值: {{ mealData.sourceMax }}</span>
					<span>素材最小值: {{ mealData.sourceMin }}</span>
					<span>套餐描述: {{ mealData.setMealDesc }}</span> -->
					<view class="mealInfo">
						<view class="mealInfo-left">
							<!-- <image :src="imageUrl + 'order-goods/sucai.png'" mode=""></image> -->
							<span>已选素材</span>
						</view>
						<view class="mealInfo-right">
							<span>{{ mealCheckList.length }} 份</span>
						</view>
					</view>
					<view class="mealInfo">
						<view class="mealInfo-left">
							<!-- <image :src="imageUrl + 'order-goods/buycar.png'" mode=""></image> -->
							<span>套餐</span>
						</view>
						<view class="mealInfo-right">
							<span>{{ mealData.setMealName}}</span>
						</view>
					</view>
					<view class="mealInfo">
						<view class="mealInfo-left">
							<!-- <image :src="imageUrl + 'order-goods/PayCircleFilled.png'" mode=""></image> -->
							<span>套餐费用</span>
						</view>
						<view class="mealInfo-right">
							<span>{{ mealData.price}} 元</span>
						</view>
					</view>
					<view class="mealInfo">
						<view class="mealInfo-left">
							<!-- <image :src="imageUrl + 'order-goods/time.png'" mode=""></image> -->
							<span>创建时间</span>
						</view>
						<view class="mealInfo-right">
							<span>{{ mealData.createTime}}</span>
						</view>
					</view>
				</view>
				<view class="meal" v-if="orderType == 'yuepai'">
					<!-- <span>套餐名称: {{ mealData.setMealName}} </span>
					<span>套餐时长: {{ mealData.duration }}</span>
					<span>套餐金额: ¥{{ mealData.price }}</span>
					<span>素材最大值: {{ mealData.sourceMax }}</span>
					<span>素材最小值: {{ mealData.sourceMin }}</span>
					<span>套餐描述: {{ mealData.setMealDesc }}</span> -->
					<view class="mealInfo">
						您选择的订单为约拍订单！
					</view>
				</view>
			</view>
		</uni-section>
		<!-- 更多服务 -->
		<uni-section class="mb-10" title="更多服务" type="line" v-if="orderType != 'yuepai'">
			
			<view class="more-serve" v-if="checkboxList.length > 0">
				<!-- <h1>更多服务</h1>
				<view class="line"></view> -->
				
				<!-- 更多 -->
				<view class="moreData">
					<checkbox-group @change="checkboxChange">
						<label style="display: flex; justify-content: space-between;" v-for="(item, index) in checkboxList"
							:key="item.servicesId" :class="item.checked?'option_active checkCss':'option_default checkCss'">
							<view class="left">
								<view class="checkboxHidden">
									<checkbox :value="item.servicesId" :checked="item.checked" />
								</view>
								<view class="checkTxt">
									<span>{{item.servicesName}}</span>
									<span class="huodong" v-if="(item.price-item.originalPrice) <= -1 && item.price >= 0"> (活动立减{{ item.originalPrice - item.price }}元) </span>
								</view>
							</view>
							<view class="right" style="margin-right: 20rpx;">
								<span class="lijian" v-if="item.price <= -1"> 立减 </span>
								<span class="shanchuhao" v-if="(item.price-item.originalPrice) <= -1 && item.price >= 0">￥{{ item.originalPrice }}</span>
								<span>{{item.price <= -1 ? "-":""}}￥{{Math.abs(item.price)}}</span>
							</view>
						</label>
					</checkbox-group>
				</view>
				
			</view>
		</uni-section>
		<!-- 素材确认 -->
		<uni-section class="mb-10" title="素材确认" type="line">
			<template v-slot:right>
				<p style="font-size: 22rpx;color:#F53F3F;">注：付款后不退不换</p>
			</template>
			<view @touchmove.stop.prevent="() => {}" class="sucai-sure">
				<!-- <view class="header">
					<h1>素材确认</h1> -->
					<!-- <span>注：付款后不退不换</span> -->
				<!-- </view> -->
				<view class="line"></view>
				<view class="xuanze">
					<p v-if="orderType != 'yuepai'">当前套餐为 {{ mealData.setMealName }} 最多选择 {{ mealData.sourceMax }} 份素材 请调整:</p>
					<p v-if="orderType == 'yuepai'">调整您的约拍素材:</p>
					<view class="xuanzeBox">
						<view :class="bianPaiId == index ? 'active':''" @click="changeShearch(index)" v-for="(item,index) in bianPaiData" :key="index">{{item.type}}</view>
						<!-- <view :class="bianPaiId == 2 ? 'active':''" @click="changeShearch('menber')">个人编排</view> -->
					</view>
					<!-- <button @click="upgradesMeal" v-if="mealData.setMealName !== '钻石套餐'">升级套餐</button> -->
				</view>
				<!-- controlsList 表示控件的列表  controlsSize 表示每个控件的大小 -->
				<view class="drag" :style="{ height: calculateHeight + 'px' }">
					<drag-and-drop-sort @emitCheckId="handleCheckId" :checkId="checkId" :controlsList="mealCheckList"
						:controlsSize="{width: 100, height: 90}">
						<template #content="{item}" style="">
							<view>
							</view>
						</template>
					</drag-and-drop-sort>
				</view>
			</view>
		</uni-section>
		<!-- 底部提交 -->
		<view class="tButton">
			<p><span>{{ orderType != 'yuepai' ? '合计 ￥' + totalPrice : '该订单为约拍订单' }}</span></p>
			<button @click="commitOrder">{{ orderType != 'yuepai' ? '提交订单' : '提交排序' }}</button>
		</view>

		<!-- 升级套餐 -->
		<uni-popup ref="popupselectPackage" type="bottom">
			<view class="popup-contentBox">
				<h1>请选择套餐</h1>
				<view @click="changeMeal(item)" :class="{'active':mealData.id === item.id }" class="box"
					v-for="(item,index) in mealDataList" :key="item.id" v-if="item.sourceMax >= mealCheckList.length">
					<view class="boxLeft">
						<!-- <image src="" mode=""></image> -->
					</view>
					<view class="boxContent">
						<h2>{{ item.setMealName }}</h2>
						<p>{{ item.setMealDesc }}</p>
					</view>
					<view class="boxRight">
						<span>￥{{ item.price }}</span>
						<view v-show="item.setMealName === '钻石套餐'" class="border">
						
						</view>
						<p v-show="item.setMealName === '钻石套餐'">推荐</p>
					</view>
				</view>

				<view class="btnList">
					<!-- <h5>已选中{{selectedAssets.length}}个素材</h5> -->
					<button @click="mealSure">确认套餐</button>
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import {
		getSetMeal
	} from '@/api/shoopcar.js'
	import {
		getMoreService
	} from '@/api/shoopcar.js'
	import {
		payMentInfo
	} from '@/api/payment.js'
	import {
		editingSynthesis,
		getYuepaiDetail
	} from '@/api/yuepai.js'
	
	import {
		getMealData,
		getCartList,
		getSnowToken,
		setTotal
	} from '@/utils/storage.js'
	import {
		getUserData,
	} from '@/utils/storage.js'
	// 滑动组件
	import dragAndDropSort from '@/components/drag-drop/drag-drop.vue'
	import imageConfig from '@/utils/images.js'
	export default {
		components: {
			dragAndDropSort,
		},
		data() {
			return {
				imageUrl:imageConfig.uploadImageUrl,
				mealData: getMealData('meal_data'),
				userInfo:getUserData(),
				mealCheckList:[],
				checkboxList: [],
				// 更多服务id
				checkValue: [],
				// 选中素材id
				checkId: [],
				// 套餐数据
				mealDataList: [],
				bianPaiId:0,
				bianPaiData:[
					{type:'AI编排'},
					{type:'个人编排'}
				],
				SortWayEnum:'AUTO',
				orderType:'',
				detail:{}
			}
		},
		onLoad(options) {
			console.log(JSON.parse(decodeURIComponent(options.selectData)))
			if(options.type == 'yuepai'){
				this.orderType = options.type
				const ids = uni.getStorageSync("yuepaiOrderId")
				getYuepaiDetail(ids.id).then(res =>{
					this.detail = res.data
				})
			}else{
				this.getMoreData()
			}
			this.mealCheckList = JSON.parse(decodeURIComponent(options.selectData))
		},
		computed: {
			totalPrice() {
				let totalPrice = 0
				this.checkboxList.map(item => {
					item.checked ? totalPrice += Number(item.price) : totalPrice += 0
				})
				totalPrice = totalPrice + Number(this.mealData.price)
				if(totalPrice<0) {
					totalPrice = 0
				}
				return totalPrice;
			},
			calculateHeight() {
				// 根据数据的长度计算高度值
				return Math.ceil(this.mealCheckList.length / 3) * 110; // 假设每个数据项的高度为20px
			}
		},
		methods: {
			// 获取更多服务数据
			getMoreData() {
				let id = this.mealData.id
				getMoreService(id).then((res) => {
					if (res.code === 200) {
						// 存入更多服务
						this.checkboxList = res.data
					} else {
						uni.showToast({
							title: "更多服务获取失败"
						})
					}
				})
			},
			checkboxChange(e) {
				var items = this.checkboxList,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.servicesId)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				this.checkValue = values.sort();
				console.log(this.checkValue);
			},
			// checkmealChange(item) { 
			// 	if(this.checkId.includes(item.id)) {
			// 		this.checkId.splice(this.checkId.indexOf(item.id), 1);
			// 		this.$set(item, 'checked', true)
			// 	} else {
			// 		this.checkId.push(item.id)
			// 	}
			// },
			// 子传父 
			handleCheckId(data) {
				this.checkId = data
			},
			// 切换AI还是人工
			changeShearch(index){
				// console.log(type,'我点到了吗')
				this.bianPaiId = index
				if(index == 0){
					this.SortWayEnum = 'AUTO'
				}else{
					this.SortWayEnum = 'Manual'
				}
			},
			// 提交订单
			commitOrder() {
				const mediaIDs = this.mealCheckList.map(item => item.mediaId)
				const mediaCoverUrls = this.mealCheckList.map(item => item.coverUrl)
				// 生产订单
				if(this.orderType != 'yuepai'){
					let data = {
						mediaCoverUrl: mediaCoverUrls.join(","),
						mediaIds: mediaIDs.join(","),
						outputDuration: '30',
						servicesList: this.checkValue,
						setMealId: this.mealData.id,
						snowFieldId: getSnowToken('snow_field'),
						sortWay:this.SortWayEnum
					}
					payMentInfo(data).then(res => {
						console.log('res -----------: ', res)
						if (res.code == 200) {
							uni.navigateTo({
								url: `/pages/order/components/payment?mediaIds=${mediaIDs}&orderInfo=`+encodeURIComponent(JSON.stringify(res.data))
							})
						} else {
							this.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}else{
					let data = {
						memberId: this.userInfo.id,
						// moreServicesId: "string",
						orderShootId: this.detail.orderShoot.id,
						sortWay: this.SortWayEnum,
						mediaIds: mediaIDs.join(","),
						// outputDuration: '30',
						// servicesList: this.checkValue,
						// setMealId: this.mealData.id,
						// snowFieldId: getSnowToken('snow_field'),
						// sortWay:this.SortWayEnum
					}
					editingSynthesis(data).then(res => {
						if (res.code == 200) {
							uni.setStorageSync("status", {type:'composite_footage',change:'yuepai'})
							uni.removeStorageSync("yuepaiOrderId")
							uni.switchTab({
								url: "/pages/order/index" 
							})
						} else {
							this.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}
				
			},
			// 升级套餐弹窗
			upgradesMeal() {
				this.$refs.popupselectPackage.open()
				const id = getSnowToken()
				// 获取套餐信息
				getSetMeal(id).then((res) => {
					if (res.code === 200) {
						// 存入套餐
						this.mealDataList = res.data
					} else {
						uni.showToast({
							title: "套餐信息获取失败"
						})
					}
				})
			},
			// 套餐选择
			changeMeal(item) {
				this.mealData = item
				// setMealData(this.mealData)
				this.sourceMax = item.sourceMax
				this.sourceMin = item.sourceMin
				console.log(item, '选择套餐')
			},

			// 确认套餐
			mealSure() {
				if (!this.mealData.id) {
					uni.showToast({
						title: "请选择套餐",
						icon: "error"
					})
					return
				} else {
					this.$refs.popupselectPackage.close()
					this.getMoreData()
				}
			},
		}
	}
</script>

<style lang="less">
	// 去掉uniPopup的padding
	.vue-ref {
		padding: 0 !important;
	}
</style>

<style lang="less">
	.content {
		background: linear-gradient(180deg , #4da6ff 0% , #4ca2ec 5% , #ffffff 11% , #ffffff 100%);
		min-height: 100vh;
		overflow: hidden;

		.sucai-sure,
		.goods-info,
		.more-serve {
			margin: 0 auto;
			// margin-top: 36rpx;
			width: 100%;
			padding-bottom: 30rpx;
			// background: #FFFFFF;
			// box-shadow: 0rpx 2rpx 5rpx 0rpx rgba(0, 0, 0, 0.19);
			// border-radius: 36rpx;

			h1 {
				margin-left: 18rpx;
				font-size: 33rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #0A0A0A;
				line-height: 82rpx;
			}

			.line {
				margin: 0 auto;
				width: 678rpx;
				height: 2rpx;
				background: #F2F2F2;
				margin-bottom: 30rpx;
			}

			.meal {
				margin: 0 20rpx;

				span {
					font-size: 24rpx;
					line-height: 1.8;
					color: #3D3D3D;
					display: block;
				}

				.mealInfo {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 70rpx;

					.mealInfo-left {
						display: flex;
						align-items: center;

						image {
							margin-right: 12rpx;
							width: 25rpx;
							height: 25rpx;
						}
					}

					.mealInfo-right {}
				}
			}

			.moreData {
				margin: 0 20rpx;
				font-size: 22rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #3D3D3D;
				line-height: 43rpx;

				.active {
					display: flex;
					justify-content: space-between;
				}

				.checkCss {
					display: flex;
					font-size: 22rpx;
					align-items: center;
					height: 70rpx;
					.right{
						font-size: 28rpx;
						color:#F53F3F;
						.lijian{
							font-size: 28rpx;
							color: #1D2129;
						}
						.shanchuhao{
							font-size: 28rpx;
							color: #C5C5C5;
							text-decoration-line: line-through;
						}
					}
					
				}

				// 选中的颜色
				.option_active {
					// color: orange;
					position: relative;
				}

				.option_active::after {
					content: '';
					position: absolute;
					// left: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 27rpx;
					height: 27rpx;
					border-radius: 50%;
					background-color: #4CA2EC;
				}

				.option_active::before {
					content: '';
					position: absolute;
					left: 5rpx;
					top: 36%;
					transform: translateY(-50%);
					width: 18rpx;
					height: 10rpx;
					border-left: 2rpx solid #ffffff;
					border-bottom: 2rpx solid #ffffff;
					transform: rotate(-45deg);
					z-index: 4;
				}

				// 默认颜色
				.option_default {
					color: #000000;
					position: relative;
				}

				.option_default::after {
					content: '';
					position: absolute;
					// left: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 27rpx;
					height: 27rpx;
					border-radius: 50%;
					border: 1rpx solid #4CA2EC;
					box-sizing: border-box;
				}

				.checkboxHidden {
					display: none;
				}

				.checkTxt {
					margin-left: 34rpx;
					.huodong{
						font-size: 24rpx;
						color: #4CA2EC;
					}
				}
			}

			.header {
				display: flex;
				justify-content: space-between;

				span {
					font-size: 22rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #EB1E1E;
					line-height: 82rpx;
					margin-right: 20rpx;
				}
			}

			.xuanze {
				display: flex;
				justify-content: space-between;

				p {
					margin-left: 20rpx;
					width: 300rpx;
					height: 59rpx;
					font-size: 22rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #010101;
				}
				.xuanzeBox{
					width: 300rpx;
					height: 54rpx;
					background-color: #efefef;
					overflow: hidden;
					border-radius: 27rpx;
					display: flex;
					justify-content: space-between;
					margin-right: 10rpx;
					
					>view{
						margin: 0 0;
						width: 150rpx;
						height: 54rpx;
						border-radius: 27rpx;
						font-size: 22rpx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #666666;
						text-align: center;
						line-height: 54rpx;
						&.active{
							background-color: #4da6ff;
							width: 150rpx;
							height: 54rpx;
							border-radius: 27rpx;
							color: #ffffff;
							// z-index: 1;
						}
					}
				}
			}

			.drag {
				overflow-x: scroll;
				margin: 0 auto;
				margin-bottom: 100rpx;
			}
		}

		.tButton {
			position: fixed;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			bottom: 0;
			width: 750rpx;
			height: 181rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 13rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 36rpx 36rpx 0rpx 0rpx;

			p {
				font-size: 20rpx;
				color: #393939;
			}

			span {
				margin-right: 18rpx;
				font-size: 33rpx;
				color: #000000;
			}

			button {
				margin: 0;
				margin-right: 20rpx;
				float: right;
				width: 254rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: #4CA2EC;
				border-radius: 36rpx;
				font-size: 33rpx;
				color: #FFFFFF;
			}
		}

		.popup-contentBox {
			width: 750rpx;
			// height: 1080rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 13rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 36rpx 36rpx 0rpx 0rpx;

			h1 {
				padding-top: 36rpx;
				padding-bottom: 72rpx;
				text-align: center;
				font-size: 43rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #000000;
			}

			.box {
				position: relative;
				margin: 0 auto;
				margin-bottom: 35rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 678rpx;
				height: 145rpx;
				background: #F2F2F2;
				border-radius: 14rpx;
				color: #000;

				.boxLeft {}

				.boxContent {
					text-align: center;
					
					h2 {
						font-size: 33rpx;
					}
					
					p {
						font-size: 22rpx;
					}
				}

				.boxRight {
					font-size: 33rpx;
					
					span {
						margin-right: 30rpx;
					}
					
					.border {
						position: absolute;
						right: 0;
						top: 0;
						width: 0rpx;
						height: 0rpx;
						border-top: 50rpx solid #FF9727;
						border-left: 50rpx solid transparent;
						border-right: 50rpx solid #FF9727;
						border-bottom: 50rpx solid transparent;
						// background-color: pink;
					}
					
					p {
						color: #ffffff;
						position: absolute;
						transform: rotate(45deg);
						top: 20rpx;
						right: 10rpx;
						font-size: 26rpx;
					}
				}
			}

			.active {
				background-color: #4CA2EC;
				color: #FFFFFF;
			}

			.btnList {
				margin: 0 50rpx;
				padding-bottom: 60rpx;
				// margin-top: 250rpx;
				height: 72rpx;
				display: flex;
				justify-content: space-between;

				h5 {
					line-height: 72rpx;
					font-size: 33rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #000000;
				}

				button {
					margin: 0 auto;
					width: 254rpx;
					height: 72rpx;
					background: #4CA2EC;
					border-radius: 36rpx;

					font-size: 33rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #FFFFFF;
					line-height: 72rpx;
				}
			}
		}
	}
	.uni-section{
		// background-color: transparent !important;
		width: 690rpx;
		margin: 0 auto;
		box-shadow: 0rpx 4rpx 20rpx rgba(165, 188, 209 , 0.25);
		margin-top: 30rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		overflow: hidden;
	}
	.uni-section .uni-section-header__decoration.line {
		background-color: #FF8D1A;
	}
	.width690{
		width: 690rpx;
		margin: 0 auto;
	}
</style>